<template>
  <div class="form-input-area">
    <span
      class="submit-button-style-first f-14 c-o f-w-600 checkAll"
      style="margin-left: 150px"
      @click="showSelectDomain"
      >从我的域名列表选择域名</span
    >
    <div class="flx-row-s-s div-line" style="margin-top: 20px; position: relative">
      <div class="long-name">您要转移的域名</div>
      <div style="width: 500px; position: relative">
        <div class="limit-number c-g f-14">
          <span class="c-o">{{ curDnNumber }} / {{maxDnNumber}}</span>
        </div>
        <Input
            v-model="dnText"
            wrap="hard"
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 5 }"
            @on-blur="domainBlur(true)"
            :placeholder="'每行1个域名，可按Enter键进行换行，最多' + maxDnNumber + '个域名'"
        />
      </div>
    </div>
    <div class="flx-row-s-c div-line long-name-nece">
      <div class="long-name">对方的190ID</div>
      <Input
        v-model.trim="identity"
        placeholder="请填写正确的会员ID"
        style="width: 250px"
        @on-blur="searchIdentity"
      />
      <div
        v-show="identityMessage"
        class="c-d2 f-14 flx-row-s-c"
        style="margin-left: 10px"
      >
        <i :class="identityClas"></i>{{ identityMessage }}
      </div>
      <!-- <span class="c-r f-14 flx-row-s-c" style="margin-left: 10px"
        ><i class="check-icon false"></i>190ID不存在</span
      > -->
    </div>
    <div class="flx-row-s-c div-line">
      <div class="long-name">对方账户邮箱</div>
      <Input
        v-model.trim="email"
        placeholder="请填写正确的对方账户邮箱"
        style="width: 250px"
      />
      <span class="f-g f-14" style="margin-left: 10px">选填</span>
    </div>
    <div class="flx-row-s-c div-line">
      <div class="flx-row-s-c long-name-nece">
        <div class="long-name">索要金额</div>
        <InputNumber
          :min="0"
          v-model="price"
          :step="0.01"
          type="number"
          style="width: 250px"
        />
        <span class="c-r f-14" style="margin-left: 10px">元</span>
      </div>

      <span class="c-black f-14" style="margin-left: 10px"
        >为保证域名安全,请索要相应金额</span
      >
    </div>
    <div class="flx-row-s-c div-line">
      <div class="long-name">附言备注</div>
      <Input
        v-model.trim="remarks"
        placeholder="请填写附言备注"
        style="width: 250px"
      />
      <span class="c-black f-14" style="margin-left: 10px"
        >对方可以收到的消息，小于50个汉字</span
      >
    </div>
    <div class="flx-row-s-c div-line">
      <div class="long-name">转移锁定</div>
      <RadioGroup v-model="rule">
        <Radio class="radio-mg-r-20" label="0">不设置</Radio>
        <Radio class="radio-mg-r-20" label="1">设置</Radio>
      </RadioGroup>
      <span class="c-r f-14"
        >(域名若设置转移锁定，60内无法转出或交易)</span
      >
    </div>
    <div class="flx-row-s-c div-line long-name-nece">
      <div class="long-name">验证码</div>
      <Input
        v-model.trim="coverIdentifyCode"
        maxlength="4"
        style="width: 160px"
      />
      <div class="code-img-area" style="margin-left: 10px">
        <Identify
          :identifyCode="identifyCode"
          :contentWidth="80"
          :contentHeight="30"
          :fontSizeMax="25"
        />
      </div>
      <span
        class="form-font-button"
        style="margin: 0 0 0 10px "
        @click="refreshCode"
        >刷新</span
      >
    </div>
    <div class="flx-row-s-c div-line">
      <div class="long-name">手机号码</div>
      <span class="c-d2 f-14">{{ mobile }}</span>
      <div
        class="user-normal-button form-button-size"
        style="margin-left: 10px"
        @click="getCodeEvent"
      >
        {{ senCodeText }}
      </div>
      <span class="c-black f-14" style="margin-left: 10px"
        >若手机号已停用无法收到短信，请联系在线客服!</span
      >
    </div>
    <div class="flx-row-s-c div-line long-name-nece">
      <div class="long-name">短信验证码</div>
      <Input v-model.trim="smsCode" style="width: 215px" />
    </div>

    <div class="btn-area">
      <Checkbox
        class="radio-mg-r-20 submit-button-style-first"
        v-model="single"
      >
        我已阅读并同意<span
          class="o-form-font-button"
          @click.prevent="ruleModelShow = true"
          >《{{ ruleTitle }}》</span
        >
      </Checkbox>
      <div
        class="user-strong-button submit-button-style submit-button-style-first"
        style="margin-top: 15px"
        @click="submit"
      >
        提交push
      </div>
    </div>

    <Lodding :loading="loading" />
<!--    &lt;!&ndash; 弹出层展示所有域名信息 &ndash;&gt;
    <commonModal
      :title="'转移结果'"
      :show.sync="showBidding"
      :isMask="false"
      :hideCancel="true"
      @confirmEvent="cancelEvent"
      @cancelEvent="cancelEvent"
    >
      <template #content>
        <div>
          <div class="list-header">
            <div class="status">状态</div>
            <div class="name">域名</div>
          </div>
          <div class="domain-list">
            <div class="row" v-for="item in resultList" :key="item.domainName">
              <div class="status">{{ item.msg }}</div>
              <div class="name">{{ item.domainName }}</div>
            </div>
          </div>
        </div>
      </template>
    </commonModal>-->
    <template-select-modal
      :show.sync="templateSelectModalShow"
      :tSelect="templateSelect"
      @check-submit="selectTemplateSubmit"
    ></template-select-modal>
    <rule-modal
      :show.sync="ruleModelShow"
      :content="ruleContent"
      :title="ruleTitle"
    ></rule-modal>
    <template-push-result-modal
        title="转移结果"
        :show.sync="resultModalShow"
        :sucList="resultList"
    ></template-push-result-modal>
    <domain-select-modal
        :show.sync="domainSelectModalShow"
        @selectDomainConfirmEvent="selectDomainConfirmEvent"
        @cancelDomainConfirmEvent="cancelDomainConfirmEvent"
    />
  </div>
</template>

<script>
import { parseDomain } from "@/utils/formatDomain";
import { makeCode } from "@/utils/format";
import Lodding from "_c/spin/loading";
import Identify from "_c/identify";
import { postPushSave, checkUserExist } from "@/api/bidding";
import { sendCode, agreement } from "@/api/user";
import { validEmail } from "@/utils/validate";
import templateSelectModal from "_c/modal/templateSelectModal/templateSelectModal.vue";
import DomainSelectModal from "_c/modal/domainSelectModal/domainSelectModal.vue";
export default {
  name: "VipDnPushForm",
  components: {
    Lodding,
    Identify,
    templateSelectModal,
    ruleModal: () => import("_c/modal/ruleModal/ruleModal.vue"),
    templatePushResultModal: () =>
        import("_c/modal/templatePushResultModal/templatePushResultModal.vue"),
    DomainSelectModal
  },
  data() {
    return {
      dmName: false,
      ruleModelShow: false,
      ruleContent: "",
      ruleTitle: "",
      dnText: "",
      test: "",
      rule: "0",
      single: false,
      curDnNumber: 0,
      maxDnNumber: 200,
      // 对方的190ID
      identity: "",
      // 返回信息
      identityMessage: "",
      identityResult: false,
      // 对方邮箱
      email: "",
      // 索要金额
      price: 0,
      // 备注
      remarks: "",
      loading: false, // loading
      // 图形验证码
      coverIdentifyCode: "",
      // 短信验证码
      smsCode: "",
      // 图形验证码
      identifyCode: "",
      isSendCode: false,
      senCodeText: "获取短信验证码",
      // 打开弹出层
      showBidding: false,
      // Push返回结果
      resultList: [],
      // 选中域名数据
      selectList: [],
      templateSelect: null,
      selectTemplateName: "",
      templateSelectModalShow: false,
      domainSelectModalShow: false,
      // 结果数据
      resultModalShow: false,
    };
  },
  computed: {
    identityClas() {
      return this.identityResult ? "check-icon true" : "check-icon false";
    },
    mobile() {
      return this.$store.state.user.mobile;
    },
  },
  created() {
    this.agreement();
  },
  mounted() {
    this.identifyCode = makeCode();
    let dnList = this.$route.params.dnList;
    if (dnList && dnList.length > 0) {
      this.dnText = dnList.join("\n");
    }
  },
  methods: {
    domainBlur(isFilter) {
      if (isFilter) {
        this.dnText = parseDomain(this.dnText, false)
      }
      if (this.dnText !== '' && this.dnText.length > 0) {
        let arr = this.dnText.split("\n")
        if (arr.length > this.maxDnNumber) {
          arr = arr.splice(0, 200)
          this.dnText = arr.join("\n")
        }
        this.curDnNumber = arr.length
      }
    },
    async agreement() {
      const data = [12];
      const res = await agreement(data);
      if ( res.result) {
        this.ruleContent = res.data[0].content;
        this.ruleTitle = res.data[0].name;
      }
    },
    // 选择模板
    selectTemplateSubmit(id, name) {
      this.templateSelect = id;
      this.selectTemplateName = name;
    },
    // 搜索190ID是否存在
    async searchIdentity() {
      if (!this.identity) {
        return false;
      }
      this.loading = true;
      const { data, result } = await checkUserExist({ account: this.identity });
      this.loading = false;
      if (result) {
        this.identityResult = data.isExist;
        if (data.isExist) {
          this.identityMessage = data.username;
        } else {
          this.identityMessage = "190ID不存在";
        }
      }
    },
    // push域名
    async submit() {
      if(this.dnText === '' || this.dnText.length === 0) {
        return this.$Message.warning("请输入域名！");
      }
      if (!this.identity) {
        this.$Message.warning("请输入对方ID");
        return false;
      }
      if (this.email && !validEmail(this.email)) {
        this.$Message.warning("邮箱格式不正确!");
        return;
      }
      if (this.price == null) {
        this.price = 0;
      }
      if (!this.coverIdentifyCode) {
        this.$Message.warning("请输入图形验证码");
        return false;
      } else if (
        this.identifyCode.toLowerCase() !== this.coverIdentifyCode.toLowerCase()
      ) {
        this.$Message.warning("图形验证码错误!");
        return false;
      }
      if (!this.smsCode) {
        this.$Message.warning("请输入验证码!");
        return false;
      }
      if (!this.single) {
        this.$Message.warning("请输入阅读协议后并同意!");
        return false;
      }
      let params = {
        domainNames: this.dnText.split("\n"),
        account: this.identity,
        email: this.email,
        amount: this.price,
        remark: this.remarks,
        isLock: parseInt(this.rule),
        code: this.smsCode,
      };
      this.loading = true;
      const { code, data, message } = await postPushSave(params);
      this.loading = false;
      // 刷新图形验证码
      this.identifyCode = makeCode();
      if (code === 200) {
        if (data.length > 0) {
          this.resultModalShow = true;
          this.resultList = data;
          return false;
        }
        this.$Message.success("操作成功!");
        // 清楚内容
        this.dnText = "";
        this.email = "";
        this.price = 0;
        this.remarks = "";
        this.rule = "0";
        this.smsCode = "";
        this.coverIdentifyCode = "";
        this.senCodeText = "获取短信验证码";
        this.identityMessage = "";
        this.identity = "";
      } else {
        this.$Message.warning(message);
      }
    },
    // 刷新验证码
    refreshCode() {
      this.identifyCode = makeCode();
    },
    // 获取短信验证吗
    async getCodeEvent() {
      if (!this.coverIdentifyCode) {
        this.$Message.warning("请输入图形验证码!");
        return false;
      } else if (
        this.identifyCode.toLowerCase() !== this.coverIdentifyCode.toLowerCase()
      ) {
        this.$Message.warning("图形验证码错误!");
        return false;
      }
      if (!this.isSendCode) {
        let count = 60;
        this.isSendCode = true;
        this.loading = true;
        const { code } = await sendCode();
        this.loading = false;
        if (code === 200) {
          this.smsInterval = setInterval(() => {
            count -= 1;
            this.senCodeText = `${count}s后重新发送`;
            if (count === 0) {
              this.isSendCode = false;
              this.senCodeText = "重新发送";
              this.smsInterval && clearInterval(this.smsInterval);
            }
          }, 1000);
        } else {
          this.isSendCode = false;
        }
      }
    },
    selectDomainConfirmEvent(domain) {
      this.domainSelectModalShow = false
      this.dnText = domain
      this.domainBlur(false)
    },
    cancelDomainConfirmEvent() {
      this.domainSelectModalShow = false
    },
    showSelectDomain() {
      this.domainSelectModalShow = true
    },
  },
  destroyed() {
    this.smsInterval && clearInterval(this.smsInterval);
  },
};
</script>

<style lang="scss" scoped>
.form-input-area {
  position: relative;
}
.long-name {
  min-width: 118px;
}
.check-icon {
  display: block;
  @include size(14px);
  margin-right: 7px;

  &.true {
    @include bg-setting("true2");
  }
  &.false {
    @include bg-setting("false");
  }
}
.limit-number {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.list-header,
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .status {
    width: 120px;
    text-align: center;
  }
  .name {
    flex: 1;
    text-align: center;
  }
}
.list-header {
  background-color: #eceff3;
  padding: 10px 0;
  .status,
  .name {
    font-size: 16px;
    font-weight: bold;
  }
}
.domain-list {
  height: 200px;
  margin-top: 10px;
  overflow-y: auto;
}
.checkAll:hover {
  cursor: pointer;
}
.btn-area {
  border-top: 1px solid #e4e6fa;
  padding-top: 30px;
  margin-top: 30px;
  .submit-button-style-first {
    margin-left: 145px;
  }
}
</style>
